<template>
  <div class="app-container">
    <el-card>
      <title-line title="基本信息" />
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="110px">
        <el-row>
          <el-col :lg="18" :xl="14">
            <el-form-item label="门头照片：">
              <upload-image
                :isShowTip="true"
                :lazy="true"
                :file-type="['jpg', 'png', 'jpeg']"
                file-pixel="60*60"
                :file-size="1"
                :response-fn="handleResponse"
                @on-change="uploadChange"
                v-model="formData.storePicture"
              />
            </el-form-item>
            <el-form-item label="门店名称：" prop="storeName">
              <el-input v-model="formData.storeName" placeholder="请输入门店名称" />
            </el-form-item>
            <el-form-item label="门店类型：" prop="storeType">
              <el-select
                v-model="formData.storeType"
                style="width: 100%"
                placeholder="请选择门店类型"
                clearable
              >
                <el-option
                  v-for="item in STORE_TYPE_SELECT"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="联系人姓名：" prop="contactName">
              <el-input v-model="formData.contactName" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="联系人电话：" prop="contactPhone">
              <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话" />
            </el-form-item>
            <el-form-item label="联系地址：">
              <AreaMultipleSelect ref="areaSelect" v-model="areaObj" type="update" />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="formData.address"
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入详细地址"
              />
            </el-form-item>
            <el-form-item label="显示顺序：" prop="sort">
              <el-input v-model="formData.sort" placeholder="请输入详细地址" />
              <p style="color: #909399">数值越小越靠前</p>
            </el-form-item>
            <el-form-item label="是否显示：" required>
              <el-radio-group v-model="formData.isShow">
                <el-radio v-for="(item, index) in SHOW_STATUS" :key="index" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="text-center">
              <el-button @click="resetForm"> 取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import rules from './rules'
import { SHOW_STATUS } from '@/enum'
import { STORE_TYPE_SELECT } from '@/enum/coupon'
export default {
  name: 'AddChannelStore',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        sort: 99,
        storePicture: '',
        isShow: false,
        storeType: '',
        storeName: '',
        contactName: '',
        contactPhone: '',
        address: '',
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        areaId: '',
        areaName: ''
      },
      areaObj: {
        provinceObj: {
          id: '',
          name: ''
        },
        cityObj: {
          id: '',
          name: ''
        },
        countyObj: {
          id: '',
          name: ''
        }
      }
    }
  },
  computed: {
    rules() {
      return rules
    },
    // 门店类型
    STORE_TYPE_SELECT() {
      return STORE_TYPE_SELECT
    },
    SHOW_STATUS() {
      return SHOW_STATUS
    },
    id() {
      return this.$route.query?.id
    }
  },
  created() {
    this.getChannelStoreDetail()
  },
  methods: {
    // 获取渠道详情
    async getChannelStoreDetail() {
      if (!this.id) return
      const { data } = await this.$http.coupon.channelApi.getChannelStoreDetail(this.id)
      for (const key in this.formData) {
        this.formData[key] = data[key]
      }

      // 回显省市区
      const areaObj = {
        provinceObj: {
          name: data.provinceName,
          id: data.provinceId
        },
        cityObj: {
          name: data.cityName,
          id: data.cityId
        },
        countyObj: {
          name: data.areaName,
          id: data.areaId
        }
      }

      this.areaObj = this.$lodash.cloneDeep(areaObj)

      this.$refs.areaSelect.showBackData(this.areaObj)
    },
    // 获取参数
    getParams() {
      const params = {
        ...this.formData
      }
      const { provinceObj, cityObj, countyObj } = this.areaObj
      if (provinceObj.id) params.provinceId = provinceObj.id
      if (provinceObj.name) params.provinceName = provinceObj.name
      if (cityObj.id) params.cityId = cityObj.id
      if (cityObj.name) params.cityName = cityObj.name
      if (countyObj.id) params.areaId = countyObj.id
      if (countyObj.name) params.areaName = countyObj.name
      if (this.id) params.id = this.id
      return params
    },
    // 新增渠道门店
    addChannelStore: _.debounce(async function () {
      const params = this.getParams()
      const { status, msg } = await this.$http.coupon.channelApi.addChannelStore(params)
      if (status === 200) {
        this.$message.success('新增成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 500),
    // 修改渠道门店
    async editChannelStore() {
      const params = this.getParams()
      const { status, msg } = await this.$http.coupon.channelApi.editChannelStore(params)
      if (status === 200) {
        this.$message.success('编辑成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    handleResponse(response) {
      return response
    },
    uploadChange() {
      if (this.formData.storePicture) {
        this.$refs.elForm.validateField('storePicture')
      }
    },
    // 确定
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        if (this.id) {
          this.editChannelStore()
        } else {
          this.addChannelStore()
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
